<template>
  <div>
    <!-- 首页 -->
    <div class="navbar">
      <div class="logo"></div>
      <div class="user-menu">
        <div class="user-menu-icon" @click="toggleDropdown"></div>
        <div class="dropdown-content" v-if="isshow">
          <router-link to="/geren">个人中心</router-link>
          <a href="#">设置</a>
          <router-link to="/logo">退出登录</router-link>
          <router-link to="/zhuce">注销</router-link>
        </div>
      </div>
    </div>
    <div class="sidebar">
      <div class="avatar"></div>
      <span>{{ username.username }}</span
      ><br /><br />
      <div class="menu-item">讲师管理</div>
      <div class="menu-item">仪表盘</div>
    </div>
    <div class="main-content">
      <div class="top" style="margin-top: 20px">
        &emsp;<span style="color: #83c2eb">讲师管理</span>/讲师列表
      </div>
      <br />
      <div class="content">
        <el-input
          v-model="input"
          placeholder="请输入内容"
          style="width: 200px"
        ></el-input
        >&nbsp; <el-button type="success" plain @click="search">搜索</el-button
        ><br /><br />
        <el-button
          type="success"
          plain
          @click="addDialogVisible = true"
          style="position: fixed; right: 50px; top: 170px"
          >添加讲师</el-button
        >
        <!-- 添加讲师弹窗 -->
        <el-dialog
          title="添加讲师"
          :visible.sync="addDialogVisible"
          width="30%"
          center
        >
          <el-input v-model="techname" placeholder="请输入讲师姓名"></el-input
          ><br /><br />
          <el-input v-model="technick" placeholder="请输入讲师昵称"></el-input
          ><br /><br />
          <el-radio-group v-model="techsex">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
          </el-radio-group>
          <br /><br />
          <el-input v-model="techbir" placeholder="请输入讲师生日"></el-input
          ><br /><br />
          <el-input v-model="iph" placeholder="请输入讲师手机号"></el-input>
          <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="(addDialogVisible = false), add()"
              >确 定</el-button
            >
          </span>
        </el-dialog>
        <!-- 表格 -->
        <table border="1">
          <thead>
            <tr>
              <th>编号</th>
              <th>姓名</th>
              <th>昵称</th>
              <th>出生日期</th>
              <th>性别</th>
              <th>手机号</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in teacherList" :key="item.id">
              <td>{{ item.id }}</td>
              <td>{{ item.name }}</td>
              <td>{{ item.nick }}</td>
              <td>{{ item.birthdata }}</td>
              <td>{{ item.sex == 0 ? "男" : "女" }}</td>
              <td>{{ item.iphone }}</td>
              <td>
                <el-link
                  ><i
                    class="el-icon-view el-icon--right"
                    @click="(lookDialogVisible = true), look(item.id)"
                  ></i> </el-link
                >&emsp;
                <el-link
                  icon="el-icon-edit"
                  @click="(editDialogVisible = true), edit(item.id)"
                ></el-link
                >&emsp;
                <el-link icon="el-icon-delete" @click="del(item.id)"></el-link>
              </td>
            </tr>
          </tbody>
        </table>
        <!-- 编辑讲师 -->
        <el-dialog
          title="编辑讲师"
          :visible.sync="editDialogVisible"
          width="30%"
          center
        >
          <el-input v-model="editname" placeholder="请输入讲师姓名"></el-input
          ><br /><br />
          <el-radio-group v-model="editsex">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
          </el-radio-group>
          <br /><br />
          <el-input v-model="editbir" placeholder="请输入讲师生日"></el-input
          ><br /><br />
          <el-input v-model="iph" placeholder="请输入讲师手机号"></el-input>
          <span slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button
              type="primary"
              @click="(editDialogVisible = false), editok()"
              >确 定</el-button
            >
          </span>
        </el-dialog>
        <!-- 查看讲师 -->
        <el-dialog
          title="编辑讲师"
          :visible.sync="lookDialogVisible"
          width="30%"
          center
        >
          &emsp;&emsp;&emsp;讲师 : &emsp;{{ name }} <br /><br />
          &emsp;讲师昵称 : &emsp;{{ nicheng }} <br /><br />
          &emsp;讲师性别 : &emsp;{{ xingbie }} <br /><br />
          &emsp;讲师生日 : &emsp;{{ shengri }} <br /><br />
          讲师手机号 : &emsp;{{ shouji }}
          <span slot="footer" class="dialog-footer">
            <el-button @click="lookDialogVisible = false">取 消</el-button>
          </span>
        </el-dialog>
      </div>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout=" total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  teacherList,
  delteacher,
  searchteacher,
  addteacher,
  editteacher,
  lookteacher,
} from "@/utils/https.js";
export default {
  name: "APP",
  data() {
    return {
      username: {},
      // 显示下拉菜单
      isshow: false,
      // 输入框
      input: "",
      // 讲师列表
      teacherList: [],
      // 添加讲师弹窗
      addDialogVisible: false,
      techname: "",
      technick: "",
      techsex: "",
      techbir: "",
      iph: "",
      // 编辑讲师弹窗
      editDialogVisible: false,
      iid: "",
      editname: "",
      editsex: "",
      editbir: "",
      // 查看讲师弹窗
      lookDialogVisible: false,
      name: "",
      nicheng: "",
      xingbie: "",
      shengri: "",
      shouji: "",
      // 分页
      currentPage: 1, // 当前页
      pageSize: 10, // 每页显示条数
    };
  },
  methods: {
    toggleDropdown() {
      this.isshow = !this.isshow; // 切换显示状态
    },
    // 分页
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.fetchRoles(this.currentPage, this.pageSize);
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      this.fetchRoles(this.currentPage, this.pageSize);
    },
    apply() {
      this.fetchRoles(this.currentPage, this.pageSize); // 调用分页方法
    },
    // 渲染列表
    fetchRoles(page, pageSize) {
      teacherList({ page: page, pagelimit: pageSize }) // 调用后端接口支持分页参数
        .then((res) => {
          this.teacherList = res.data.data; // 更新讲师列表
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 添加讲师
    add() {
      addteacher({
        name: this.techname,
        nick: this.technick,
        sex: this.techsex,
        birthdata: this.techbir,
        iphone: this.iph,
      })
        .then(() => {
          this.apply();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 删除讲师
    del(id) {
      delteacher({
        id: id,
      })
        .then(() => {
          this.apply();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 搜索
    search() {
      searchteacher({
        page: 1,
        pagelimit: 10,
        name: this.input,
      })
        .then((res) => {
          this.teacherList = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 编辑讲师
    edit(id) {
      this.iid = id;
    },
    editok() {
      editteacher({
        id: this.iid,
        name: this.editname,
        sex: this.editsex,
        birthdata: this.editbir,
      })
        .then(() => {
          this.apply();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 查看讲师
    look(id) {
      lookteacher({
        id: id,
      })
        .then((res) => {
          this.name = res.data.name;
          this.nicheng = res.data.nick;
          this.xingbie = res.data.sex == 0 ? "男" : "女";
          this.shengri = res.data.birthdata;
          this.shouji = res.data.iphone;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {},
  mounted() {
    // 获取用户信息
    this.username = JSON.parse(localStorage.getItem("userInfo"));
    // 获取讲师列表
    this.apply();
  },
};
</script>

<style lang="less" scoped>
/* 重置浏览器默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 侧边栏样式 */
.sidebar {
  width: 220px;
  height: 100vh;
  background-color: #2c3e50;
  color: white;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
  z-index: 1; /* 确保侧边栏在顶部 */
}

/* 头像样式 */
.sidebar .avatar {
  width: 60px;
  height: 60px;
  background-image: url(./莎头.jpg);
  background-size: cover;
  border-radius: 50%;
  margin-bottom: 20px;
}

/* 菜单项样式 */
.sidebar .menu-item {
  margin: 10px 0;
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.sidebar .menu-item:hover {
  background-color: #34495e;
}

/* 主内容区域样式 */
.main-content {
  margin-left: 220px;
  padding: 20px;
  margin-top: 30px; /* 与导航栏高度一致，避免内容被遮挡 */
}

/* 顶部导航栏样式 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #2c3e50;
  color: white;
  padding: 10px 20px;
  position: fixed;
  top: 0;
  left: 220px; /* 与侧边栏宽度一致 */
  width: calc(100% - 220px); /* 减去侧边栏宽度 */
  z-index: 2; /* 确保导航栏在侧边栏之上 */
}

/* 用户菜单图标样式 */
.user-menu-icon {
  width: 40px;
  height: 40px;
  background-image: url(./莎头.jpg);
  background-size: cover;
  border-radius: 50%;
  cursor: pointer;
}

/* 用户菜单下拉内容样式 */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #34495e;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 3; /* 确保下拉菜单在导航栏之上 */
  right: 20px;
  top: 100%;
}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #3b5998;
}

/* 显示下拉内容 */
.dropdown-content {
  display: block;
}

// 头部
.top {
  width: 100%;
  height: 50px;
  line-height: 50px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
// 内容
.content {
  width: 100%;
  height: 100%;
  padding: 20px;
  overflow: auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
// 表格
table {
  width: 100%;
  border-collapse: collapse; // 边框合并
  border: 0px;
}

th,
td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  position: relative;
}

th {
  background-color: #eceef5;
  color: #333;
  height: 55px;
}

td {
  height: 55px;
  color: gray;
}

tr:hover {
  background-color: #f5f7fa;
}
.block {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
</style>
